
<template>
  <div>
    <div v-for="cart in cartList">

      <span>{{cart.shopName}}</span>
      <el-table :data="cart.cartItemList"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column  width="55">
          <template slot-scope="scope">
            <img :src="scope.row.skuImg" class="image">
          </template>
        </el-table-column>

        <el-table-column prop="skuName" label="商品名称"  width="180"></el-table-column>
        <el-table-column prop="skuAttr"  width="180"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>


        <el-table-column   label="可用优惠券" prop="">
          <div v-for="dis in cart.cartItemList" :key="dis.skuId">
            <div v-for="aaa in dis.discountCouponList" :key="aaa.couponId">
                    <span>

                      {{aaa.name}}
                   <span v-if="aaa.couponId==1">满{{aaa.value}}减{{aaa.value2}}</span>
                      <span v-if="aaa.couponId==2">满{{aaa.value}}打{{aaa.value2}}折</span>
                      <span v-if="aaa.couponId==3">随机减{{aaa.value}}-{{aaa.value2}}</span>  <br>
                      {{ aaa.couponName }} - 可用时间: {{ aaa.useStartTime }} 至 {{ aaa.useEndTime}}
                   </span>

            </div>
          </div>
        </el-table-column>

        <el-table-column label="数量">
          <template slot-scope="scope">
            <span>{{scope.row.num}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div >
      <h3 class="moneyFloat">总价：￥{{moneys}}</h3>
      <el-button @click="goToPaySuccess" type="danger">结算</el-button>
    </div>
  </div>
</template>

<script>
import { listCart } from '@/api/cart/cart'

export default {
  name: "SkuInfo",
  data() {
    return {
      cartList:[{
        cartItemVoList:[
          {
            discountCouponList:[
              {
                coupinTypeList:[],
                acquireMode:""
              }
            ],
          }
        ],
      }
      ],
      order:{
        skuIds:""
      },
      cartItemVoLists:[],

      skuIds:[],
      skuIdValue:{},
      moneys:0,
    };

  },


  created() {
    this.getList();
  },

  methods: {
    /** 查询sku列表 */
    getList() {
      listCart().then(response => {
        this.cartList = response.data;
        this.cartList.forEach((item)=>{
          console.log(item)
        })
      })
    },

    async goToPaySuccess(){


      //提示考虑清楚支付
      this.$confirm('考虑清楚在支付！', '提示', {
        confirmButtonText: '刷给我狠狠的刷',
        cancelButtonText: '认清自己',
        type: 'warning'
      }).then(() => {

        //这里写跳转支付页面
        window.open("http://127.0.0.1:9204/alipay/pay?subject="+this.cartList[0].shopName+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+this.moneys,'_self')
      }).catch(() => {});
    },

    handleSelectionChange(val){
      this.moneys = "";
      this.skuIds = [];
      this.skuIdValue = "";
      this.cartItemVoLists = val;
      this.cartItemVoLists.forEach((item)=>{
        //逗号拼接
        this.order.skuIds = item.skuId.join(",");
        console.log(this.order.skuIds)
        this.skuIds.push(item.skuId)
        console.log(this.moneys)
        //选中的单价相加
        this.moneys = (Number)(this.moneys + item.price * item.num);

      })
      this.skuIds.forEach((item)=>{
        this.skuIdValue = this.skuIdValue + item + ",";
      })

    },

  }
};
</script>

<style>

.moneyFloat {
  float: right;
  color: red;
}

</style>
